<template>
    <div>
        <el-form
                ref="dataForm"
                :model="rowData"
                label-position="left"
                label-width="170px"
                style="width: 90%; margin-left:50px;"
        >
            <el-card class="box-card" :body-style="{ background:'#dfda72', color:'#FFF', }">
                <el-form-item
                        label="问卷类型"
                        prop="mouldType"
                >
                    <el-radio v-model="rowData.mouldType" :label="0">普通问卷调查</el-radio>
                    <el-radio v-model="rowData.mouldType" :label="1" :disabled="true">计分题</el-radio>
                    <el-radio v-model="rowData.mouldType" :label="2" :disabled="true">逻辑分析归类题</el-radio>
                </el-form-item>
            </el-card>


            <el-card class="box-card" :body-style="{ background:'#b0e6b8', color:'#FFF', }">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item
                                label="问卷标题："
                                prop="title"
                        >
                            <el-input v-model="rowData.title"  type="text" placeholder="问卷标题..." class="inputBox" :disabled="isDisabled"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                                label="问卷封面："
                                prop="prefixPic"
                        >
                            <el-input v-model="rowData.prefixPic"  type="text" placeholder="问卷封面..." class="inputBox" :disabled="isDisabled"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item
                                label="问卷前言："
                                prop="prefix"
                        >
                            <el-input v-model="rowData.prefix"  type="text" placeholder="问卷前言..." class="inputBox" :disabled="isDisabled"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                                label="问卷结语："
                                prop="suffix"
                        >
                            <el-input v-model="rowData.suffix"  type="text" placeholder="问卷结语..." class="inputBox" :disabled="isDisabled"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>


            <el-card class="box-card" :body-style="{ background:'#dca09d', color:'#FFF', }">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item
                                label="开始时间："
                                prop="startTime"
                        >
                            <el-date-picker
                                    :disabled="isDisabled"
                                    v-model="rowData.startTime"
                                    type="date"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    placeholder="选择日期"
                                    class="inputBox"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                                label="结束时间："
                                prop="endTime"
                        >
                            <el-date-picker
                                    :disabled="isDisabled"
                                    v-model="rowData.endTime"
                                    type="date"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    placeholder="选择日期"
                                    class="inputBox"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="!isAdd" :gutter="20">
                    <el-col :span="8">
                        <el-form-item
                                label="创建时间："
                                prop="cstCreate"
                        >
                            <el-date-picker
                                    :disabled="true"
                                    v-model="rowData.cstCreate"
                                    type="date"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择日期"
                                    class="inputBox"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item
                                label="创建者："
                                prop="createOwner"
                        >
                            <el-input v-model="rowData.createOwner"  type="text" placeholder="创建者..." class="inputBox" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item
                                label="修改时间："
                                prop="cstModify"
                        >
                            <el-date-picker
                                    :disabled="true"
                                    v-model="rowData.cstModify"
                                    type="date"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择日期"
                                    class="inputBox"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>


            <el-card class="box-card" :body-style="{ background:'#77baff', color:'#FFF', }">
                <el-row>
                    <el-form-item
                            label="备注信息："
                            prop="purpose"
                    >
                        <el-input v-model="rowData.purpose"  type="textarea" placeholder="备注信息..." class="inputBox" :disabled="isDisabled"></el-input>
                    </el-form-item>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item
                                label="流程状态"
                                prop="state"
                        >
                            <el-radio v-model="rowData.state" :label="0">草稿</el-radio>
                            <el-radio v-model="rowData.state" :label="1">可发布</el-radio>
                            <el-radio v-model="rowData.state" :label="2">发布中</el-radio>
                            <el-radio v-model="rowData.state" :label="3">已结束</el-radio>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                                label="软删状态"
                                prop="status"
                        >
                            <el-radio v-model="rowData.status" :label="0">可用</el-radio>
                            <el-radio v-model="rowData.status" :label="1">禁用</el-radio>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item
                                label="发布次数："
                                prop="showNum"
                        >
                            <el-input-number v-model="rowData.showNum" :disabled="true"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                                label="问题个数："
                                prop="answerCount"
                        >
                            <el-input-number v-model="rowData.answerCount" :disabled="true"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item
                                label="回收量："
                                prop="recovery"
                        >
                            <el-input v-model="rowData.recovery"  type="text" placeholder="回收量:0" class="inputBox" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item
                                label="浏览量："
                                prop="pageviews"
                        >
                            <el-input v-model="rowData.pageviews"  type="text" placeholder="浏览量:0" class="inputBox" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item
                                label="回收率(%)："
                                prop="rateRecovery"
                        >
                            <el-input v-model="rowData.rateRecovery"  type="text" placeholder="回收率:0%" class="inputBox" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item
                                label="平均完成时间(min)："
                                prop="completionTime"
                        >
                            <el-input v-model="rowData.completionTime"  type="text" placeholder="平均完成时间:0" class="inputBox" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelEditData">
                取消
            </el-button>
            <el-button type="primary" @click="editData" v-if="!isDisabled">
                保存
            </el-button>
        </div>
    </div>
</template>

<script>

    import { postBody } from "@/utils/httpUtil";

    export default {
        name: "QuestionMouldEditForm"
        ,props: {
            closeDlg: Function
            ,refreshTable: Function
            ,rowData: Object
            ,isAdd: Boolean
            ,isDisabled: {
                type: Boolean
                ,default: false
            },
        }
        ,data() {
            return { }
        }
        ,methods: {
            initFormData() {
                // 清除表单验证
                this.clearEditFormValidate()
            },
            clearEditFormValidate() { // 清除表单验证方法
                this.$nextTick(() => {
                    this.$refs['dataForm'].clearValidate()
                })
            },
            cancelEditData() {
                // 关闭弹窗
                if (this.closeDlg) {
                    this.closeDlg()
                }
            },
            editData() {
                // 验证表单项
                this.$refs
                        ['dataForm'].validate((valid) => {
                    if (valid) {
                        // 初始化请求数据和路径
                        let rowData = Object.assign({}, this.rowData)
                        if(!rowData.createOwner){
                            rowData.createOwner=this.$store.state.user.id
                        }
                        let url = "/questionMould/"
                        if (!this.isAdd) {
                            url += "update";
                        } else {
                            url += "add";
                        }
                        postBody(url, rowData).then(resp => {
                            if(resp.result) {
                                this.$notify({
                                    title: '提示',
                                    message: '数据编辑成功！',
                                    type: 'success',
                                    duration: 2000
                                })
                                // 关闭弹窗
                                if (this.closeDlg) {
                                    this.closeDlg()
                                }
                                // 刷新列表
                                if (this.refreshTable) {
                                    this.refreshTable()
                                }
                            } else {
                                this.$notify({
                                    title: '提示',
                                    message: '数据编辑失败！'+resp.msg,
                                    type: 'warning',
                                    duration: 2000
                                })
                            }
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .inputBox {
        width: 100%;
    }
</style>
